<template>
    <section class="logistics-detail-main base-main">
      <!--订单商品数量-->
      <div class="goods-num-box mt10 bgcFFF pr">
        <div class="inline-block">
          <ul class="img-list inline-block" >
            <li class="fll" v-for="(item,index) in imgList" :key="index">
              <img :src="item.path" alt="">
            </li>
          </ul>
        </div>
        <span class="good-total fs12 text-c inline-block">
          共2件商品
        </span>
      </div>
      <!--订单商品数量-->

      <!--运单号-->
      <div class="waybill-number bgcFFF mt10">
        <div class="expressage-icon inline-block">
          <img src="http://p4.qhimg.com/t01bfbb3c48588bde10.jpg" alt="">
        </div>
        <div class="expressage-company inline-block">
          <p class="fs14">
            运单号：{{expressageNumber}}
            <span class="flr base-btn-copy text-c"
                  v-clipboard:copy="expressageNumber"
                  v-clipboard:success="onCopy"
                  v-clipboard:error="onError">复制</span>
          </p>
          <p class="fs12 color7A7B82">物流公司：中通快递</p>
          <p class="fs12 color7A7B82">客服电话：200-400-8909</span></p>
        </div>
      </div>
      <!--运单号-->

      <!--物流进度-->
      <div class="expressage-step bgcFFF mt10">
        <div class="loginstics-info">
          <div class="loginstics-box">
            <div class="box-left color7A7B82 text-r">
              <p class="fs14">
                04-24
              </p>
              <p class="fs12">16:30</p>
            </div>
            <div class="box-right line-left pr">
              <p class="fs12 color7A7B82">&#91收货地址] 广东省广州市花都区新华街迎宾大道 116号</p>
              <i class="terminus inline-block pa text-c">收</i>
            </div>
          </div>
          <div class="loginstics-box">
            <div class="box-left color7A7B82 text-r">
              <p class="fs14">
                04-24
              </p>
              <p class="fs12">16:30</p>
            </div>
            <div class="box-right line-left pr">
              <p class="title fs14">运输中</p>
              <p class="fs12 color7A7B82">包裹正在某某某，正在发往某某某</p>
              <i class="fs20 terminus terminusing inline-block pa text-c iconfont iconkuaidi"></i>
            </div>
          </div>
          <div class="loginstics-box">
            <div class="box-left color7A7B82 text-r">
              <p class="fs14">
                04-24
              </p>
              <p class="fs12">16:30</p>
            </div>
            <div class="box-right line-left pr">
              <p class="fs12 color7A7B82">包裹正在某某某，正在发往某某某</p>
              <i class="terminus terminused inline-block pa text-c"></i>
            </div>
          </div>
          <div class="loginstics-box">
            <div class="box-left color7A7B82 text-r">
              <p class="fs14">
                04-24
              </p>
              <p class="fs12">16:30</p>
            </div>
            <div class="box-right pr">
              <p class="title fs14">已发货</p>
              <p class="fs12 color7A7B82">包裹正在等待揽收</p>
              <i class="terminus terminusing inline-block pa text-c">发</i>
            </div>
          </div>
        </div>

      </div>
      <!--物流进度-->
    </section>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        imgList:[
          {
            path:'http://p4.qhimg.com/t01bfbb3c48588bde10.jpg'
          },
          {
            path:'http://p4.qhimg.com/t01bfbb3c48588bde10.jpg'
          },
          {
            path:'http://p4.qhimg.com/t01bfbb3c48588bde10.jpg'
          },
          {
            path:'http://p4.qhimg.com/t01bfbb3c48588bde10.jpg'
          },
        ],
        expressageNumber:'42141244420'
      }
    },
    created(){
      this.$nextTick(function(){
        let length = this.imgList.length;
        $('.img-list').css('width','88' * length + 'px')
      })
    },
    methods: {
      //复制成功
      onCopy(e){
        console.log(e);
        this.$toast('复制成功')
      },
      onError(e){
        console.log(e);
        this.$toast('复制失败')
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/css/logisticsDetail';
</style>
